<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
	<z-paging-swiper :fixed="fixed" :safeAreaInsetBottom="safeAreaInsetBottom" :swiperStyle="swiperStyle">
		<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
		<!-- 注意！此处的z-tabs为独立的组件，可替换为第三方的tabs，若需要使用z-tabs，请在插件市场搜索z-tabs并引入，否则会报插件找不到的错误 -->
		<template #top>
			<slot name="tabsTop">
				<!-- tabs的上面 -->
			</slot>
			<leo-tabs
				ref="tabs"
				:list="list"
				:current="leoCurrent"
				@change="tabsChange"
				:scrollCount="scrollCount"
				:tabsStyle="tabsStyle"
				:tabWidth="tabWidth"
				:barWidth="barWidth"
				:barHeight="barHeight"
				:swiperWidth="swiperWidth"
				:barStyle="barStyle"
				:bottomSpace="bottomSpace"
				:barAnimateMode="barAnimateMode"
				:nameKey="nameKey"
				:valueKey="valueKey"
				:activeColor="activeColor"
				:inactiveColor="inactiveColor"
				:disabledColor="disabledColor"
				:activeStyle="activeStyle"
				:inactiveStyle="inactiveStyle"
				:disabledStyle="disabledStyle"
				:bgColor="bgColor"
				:badgeMaxCount="badgeMaxCount"
				:badgeStyle="badgeStyle"
				:initTriggerChange="initTriggerChange"
				:unit="unit"
				:leoTabsClass="leoTabsClass"
			>
				<template #left>
					<slot name="tabsLeft">
						<!-- tabs的左边 -->
					</slot>
				</template>
				<template #right>
					<slot name="tabsRight">
						<!-- tabs的右边 -->
					</slot>
				</template>
			</leo-tabs>
			<slot name="tabsBottom">
				<!-- tabs的下面 -->
			</slot>
		</template>
		<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
		<swiper class="swiper" :current="leoCurrent" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<!-- 把数据都传上去-小程序不支持动态 name ，所以需要在上级判断 -->
				<view v-if="showSwiper['leoKey' + index] && showList" class="leo-content">
					<slot name="content" :leo_item="item" :leo_index="index"></slot>
				</view>
				<view v-else style="width: 100%;height: 100%;" class="flex flex-y flex-center-center">
					<view class="loading">
						<view v-for="e in 12" :key="e" class="item"></view>
					</view>
					<view style="color: #6543ef; padding-top: 20rpx; font-size: 35rpx; letter-spacing: 1px;">
						{{ t('leo-drag.loading') }}
					</view>
				</view>
			</swiper-item>
		</swiper>
		<template #bottom>
			<slot name="bottom"></slot>
		</template>
	</z-paging-swiper>
</template>

<script>
import mixin from '../leo-tabs/js/mixin';
import { initVueI18n } from '@dcloudio/uni-i18n';
import messages from '../leo-drag/i18n/index.js';
const { t } = initVueI18n(messages);
export default {
	mixins: [mixin], // props配置
	props: {
		// 是否使用fixed布局，默认为是
		fixed: {
			type: Boolean,
			default: true
		},
		// 是否开启底部安全区域适配
		safeAreaInsetBottom: {
			type: Boolean,
			default: false
		},
		// z-paging-swiper样式
		swiperStyle: {
			type: Object,
			default: function () {
				return {};
			}
		}
	},
	emits: ['update:current'],
	data() {
		return {
			leoCurrent: this.current,
			showSwiper: {}, // 是否显示
			t,
			showList:false,	// 兼容小程序
		};
	},
	watch: {
		leoCurrent: {
			handler(e) {
				this.showSwiper['leoKey' + e] = true;
				this.$emit('update:current', e);
			},
			immediate: true
		}
	},
	onShow() {},
	mounted(){
		this.showList = true;
	},
	methods: {
		// tabs通知swiper切换
		tabsChange(index) {
			this.leoCurrent = index;
		},
		// swiper滑动中
		swiperTransition(e) {
			this.$refs.tabs.setDx(e.detail.dx);
		},
		// swiper滑动结束
		swiperAnimationfinish(e) {
			this.leoCurrent = e.detail.current;
			this.$refs.tabs.unlockDx();
		},
		// 重新计算tabs的位置和条件
		updateSubviewLayout(i){
			this.$refs.tabs.updateSubviewLayout(i);
		}
	}
};
</script>
<style lang="scss" scoped>
.swiper {
	height: 100%;
	.swiper-item {
		.leo-content{
			:deep() {
				// 微信小程序会多嵌一层view--综合一起设置
				// #ifdef MP-WEIXIN
				&>view {
					height: 100%;
					& > view {
						height: 100%;
					}
				}
				// #endif
				// 除了微信小程序其他平台给自己view添加一个view
				// #ifndef MP-WEIXIN
				&>view {
					height: 100%;
				}
				// #endif
			}
		}
	}
}

.loading {
	position: relative;
	width: 80rpx;
	height: 80rpx;
	& > .item {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -10rpx;
		width: 50%;
		height: 20rpx;
		transform-origin: left center;
		&::after {
			content: '';
			position: absolute;
			right: 0;
			top: 0;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #6543ef;
			animation: dotscale 1.2s linear infinite;
			animation-delay: var(--animation-delay);
		}
		&:nth-child(1) {
			transform: rotate(360deg);
			--animation-delay: 0s;
		}

		&:nth-child(2) {
			transform: rotate(330deg);
			--animation-delay: -0.1s;
		}

		&:nth-child(3) {
			transform: rotate(300deg);
			--animation-delay: -0.2s;
		}

		&:nth-child(4) {
			transform: rotate(270deg);
			--animation-delay: -0.3s;
		}

		&:nth-child(5) {
			transform: rotate(240deg);
			--animation-delay: -0.4s;
		}

		&:nth-child(6) {
			transform: rotate(210deg);
			--animation-delay: -0.5s;
		}

		&:nth-child(7) {
			transform: rotate(180deg);
			--animation-delay: -0.6s;
		}

		&:nth-child(8) {
			transform: rotate(150deg);
			--animation-delay: -0.7s;
		}

		&:nth-child(9) {
			transform: rotate(120deg);
			--animation-delay: -0.8s;
		}

		&:nth-child(10) {
			transform: rotate(90deg);
			--animation-delay: -0.9s;
		}

		&:nth-child(11) {
			transform: rotate(60deg);
			--animation-delay: -1s;
		}

		&:nth-child(12) {
			transform: rotate(30deg);
			--animation-delay: -1.1s;
		}
	}
}

@keyframes dotscale {
	0% {
		transform: scale(1);
		// filter: hue-rotate(0deg);
	}

	100% {
		transform: scale(0);
		// filter: hue-rotate(360deg);
	}
}

.flex {
	display: -webkit-box; /* Safari 6.1+ */
	display: -ms-flexbox; /* IE 10 */
	display: flex;
	flex-direction: row !important;
	&-y {
		flex-direction: column !important;
	}

	&-start {
		align-content: flex-start !important;
	}

	&-top {
		align-items: flex-start !important;
	}

	&-bottom {
		align-items: flex-end !important;
	}

	&-center {
		align-items: center !important;
	}

	&-baseline {
		align-items: baseline !important;
	}

	&-center-center {
		align-items: center !important;
		justify-content: center !important;
	}

	&-content-end {
		justify-content: flex-end !important;
	}

	&-content-center {
		justify-content: center !important;
	}

	&-between {
		justify-content: space-between !important;
	}

	&-around {
		justify-content: space-around !important;
	}

	&-evenly {
		justify-content: space-evenly !important;
	}

	&-wrap {
		flex-wrap: wrap !important;
	}

	&-children-center {
		align-self: center !important;
	}

	&-flex1 {
		flex: 1;
	}

	@for $i from 1 through 10 {
		& .flex-#{$i} {
			flex: $i;
		}
	}

	//
	&-none {
		flex: none;
	}
}
</style>
